import 'dart:math';

import 'package:flutter_elf/config/component_index.dart';
import 'dart:ui' as ui;

import 'package:flutter_elf/utils/asset_utils.dart';
import 'package:flutter_elf/utils/common_utils.dart';
class SlideUnlockPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return SlideUnlockPageState();
  }
}

class SlideUnlockPageState extends State with SingleTickerProviderStateMixin{

  double value = 20;
  double desValue = 118;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBarCreator.create(context, '滑动解锁'),
      body: Column(
        children: <Widget>[
          SizedBox(height: 100,),
          Container(
            padding: EdgeInsets.all(15),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(20)
            ),
            child: FutureBuilder<List<ui.Image>>(
              future: Future.wait([
                //AssetUtils.loadImage(R.staticImageSlideUnlockImagePicPng,px(420).toInt() , px(240).toInt()),
                //AssetUtils.loadImage(R.staticImageSlideUnlockImageSliderPng,px(80).toInt() , px(80).toInt()),
              ]),
              builder: (context,snap){
                if(!snap.hasData)return SizedBox();
                return Container(
                  height: px(420),
                  width: px(420),
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.blue,width: 1)
                  ),
                  child: Column(
                    children: <Widget>[
                      CustomPaint(
                        painter: SlideUnlockPainter(snap.data[0],snap.data[1],value.toInt()),
                        size: Size(
                            px(420),
                            px(240)
                        ),
                      ),
                      Container(
                        height: px(100),
                        child: Stack(
                          children: <Widget>[
                            Container(
                              alignment: Alignment.centerRight,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(8),
                                boxShadow: [
                                  BoxShadow(
                                    color: Color(0xff6569FF).withOpacity(0.14),
                                    offset:Offset(0,1),blurRadius: 3
                                  )
                                ]
                              ),
                              child: Text('拖动左边滑块完成上方拼图',style: TextStyle(fontSize: 11,color: Color(0xffACB5CA)),),
                            ),
                            GestureDetector(
                              onHorizontalDragUpdate:(DragUpdateDetails details){
                                setState(() {
                                  value = details.localPosition.dx;
                                });
                              },
                              onHorizontalDragEnd: (DragEndDetails details){
                                if((value - desValue).abs() < 20){
                                  CommonUtils.showToast('到达目标了');
                                }else{
                                  CommonUtils.showToast('还没有到大');
                                }
                              },
                              child: CustomPaint(
                                painter: Indicator(height: 52,value: value),
                                size: Size(px(240), 30),
                              ),
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

class SlideUnlockPainter extends CustomPainter{
  ui.Image slider;
  ui.Image image;
  int value;
  SlideUnlockPainter(this.image,this.slider, this.value);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    Offset offset = Offset(px(value),px(120));
    canvas.drawImage(image, Offset(0,0), paint);
    canvas.drawImage(slider, offset, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}


class UnlockPainter extends  CustomPainter{
  final ui.Image image;
  final int srcValue;//左边的距离
  final int desValue;//目标距离左边的距离
  int marginTop = 60;
  UnlockPainter(this.image,this.srcValue,this.desValue);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    Path path = Path();

//    canvas.drawImage(image, Offset(0,0), paint);
    drawGap(canvas);
  }

  ///画缺口
  drawGap(Canvas canvas){
    Path path = getGapPath(srcValue);
    Paint paint = Paint()..color = Colors.red..strokeWidth = 1
      ..isAntiAlias = true
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.square;
    canvas.drawPath(path, paint);
//    canvas.drawImageRect(image, getGapPath(desValue).getBounds(), getGapPath(srcValue).getBounds(), paint);
  }

  Path getGapPath(int value){
    Path path = Path();
    path.moveTo(px(20) + value, px(200));//右
    path.lineTo(px(100) + value, px(200));//上
    path.lineTo(px(100) + value, px(120));//
    path.lineTo(px(70) + value, px(120));
    Rect topRect = Rect.fromCenter(center: Offset(px(60) + value, px(120)),height: px(20),width: px(20));
    path.arcTo(topRect, pi, pi,false);
    path.lineTo(px(20) + value, px(120));
    path.lineTo(px(20) + value, px(150));
    Rect leftRect = Rect.fromCenter(center:Offset(px(20) + value,px(160)),height: px(20),width: px(20));
    path.arcTo(leftRect, pi / 2 , pi,true);
    path.lineTo(px(20) + value, px(200));
    path.close();
    return path;
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }
}

class Indicator extends CustomPainter{
  double value;
  double height;
  double width;

  Indicator({ this.value, this.height});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..isAntiAlias = true
      ..color = Colors.red;
    Offset offset = Offset(value, height/2);
//    canvas.drawImage(indicator, offset, paint);
    drawIndicator(canvas, paint, offset, px(114), px(60));
    paint.color = Colors.white;
    paint.strokeWidth = 1.5;
    drawLine(canvas,paint,offset);
  }

  drawLine(Canvas canvas,Paint paint,Offset offset){
    canvas.drawLine(Offset(offset.dx - 10,offset.dy + 5), Offset(offset.dx - 10,offset.dy - 5), paint);
    canvas.drawLine(Offset(offset.dx,offset.dy + 5), Offset(offset.dx ,offset.dy - 5), paint);
    canvas.drawLine(Offset(offset.dx + 10,offset.dy + 5), Offset(offset.dx + 10,offset.dy - 5), paint);
  }

  drawIndicator(Canvas canvas,Paint paint,Offset center,double width,double height){
    Rect rect = Rect.fromCenter(width:width,height:height,center: center);
    RRect r = RRect.fromRectXY(rect, 5, 5);
    canvas.drawRRect(r, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }

}